﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="js/syntaxhighlighter_3.0.83/scripts/shCore.js"></script>
<script type="text/javascript" src="js/syntaxhighlighter_3.0.83/scripts/shBrushJScript.js"></script>
<link type="text/css" rel="stylesheet" href="js/syntaxhighlighter_3.0.83/styles/shCoreDefault.css"/>
<script type="text/javascript">SyntaxHighlighter.all();</script>
</head>
 <body style="background:#f0f0f0">
  <center>我是iframe加载的页面 我的高度能自适应</center>

  <h4>代码结构</h4>
<pre class="brush:js;">
<!--
 <body>
  <div class="ui-layout-north">俺是头</div>
  <div class="ui-layout-west" >俺是左腿</div>
  <iframe id="centerFrame" name="centerFrame" class="ui-layout-center"  src="center.html"></iframe>
  <div class="ui-layout-east">俺是右腿</div>
  <div class="ui-layout-south">俺是脚</div>
 </body>
--> 
</pre>	
<h4>第一步：页面引入(双击后右键复制代码)</h4>
<pre class="brush: js;">
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="js/jquery-ui/js/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
<script src="js/jquery-ui/layout/jquery.layout-latest.js" type="text/javascript"></script>
<link href="js/jquery-ui/layout/css/layout-default-latest.css" rel="stylesheet" type="text/css" />//可修改页面直接边框的样式
	
</pre>

<h4>第二步：页面head内加入(双击后右键复制代码)</h4>
<pre class="brush: js;">
<!--
<script type="text/javascript">
$(document).ready(function() {
	$('body').layout({ 
		spacing_open:3,//边框的间隙 
		spacing_closed:4,//关闭时边框的间隙 
		resizerDragOpacity:0.5,//调整大小边框移动时的透明度
		west__size:180,//左侧页面宽度
		north__size:97,//顶部页面高度
		south__size:37//底部页面高度
	 });
});
</script> 
--> 
</pre>
<h4>其他参数</h4>
<pre class="brush:js">
applyDefaultStyles: true,//应用默认样式 
    scrollToBookmarkOnLoad:false,//页加载时滚动到标签 
    showOverflowOnHover:false,//鼠标移过显示被隐藏的，只在禁用滚动条时用。 
    north__closable:false,//可以被关闭 
    north__resizable:false,//可以改变大小 
    north__size:50,//pane的大小 
    spacing_open:8,//边框的间隙 
    spacing_closed:60,//关闭时边框的间隙 
    resizerTip:"可调整大小",//鼠标移到边框时，提示语 
    //resizerCursor:"resize-p" 鼠标移上的指针样式 
    resizerDragOpacity:0.9,//调整大小边框移动时的透明度 
    maskIframesOnResize:"#ifa",//在改变大小的时候，标记iframe（未通过测试） 
    sliderTip:"显示/隐藏侧边栏",//在某个Pane隐藏后，当鼠标移到边框上显示的提示语。 
    sliderCursor:"pointer",//在某个Pane隐藏后，当鼠标移到边框上时的指针样式。 
    slideTrigger_open:"dblclick",//在某个Pane隐藏后，鼠标触发其显示的事件。(click", "dblclick", "mouseover) 
    slideTrigger_close:"click",//在某个Pane隐藏后，鼠标触发其关闭的事件。("click", "mouseout") 
    togglerTip_open:"关闭",//pane打开时，当鼠标移动到边框上按钮上，显示的提示语 
    togglerTip_closed:"打开",//pane关闭时，当鼠标移动到边框上按钮上，显示的提示语 
    togglerLength_open:100,//pane打开时，边框按钮的长度 
    togglerLength_closed:200,//pane关闭时，边框按钮的长度 
    hideTogglerOnSlide:true,//在边框上隐藏打开/关闭按钮(测试未通过) 
    togglerAlign_open:"left",//pane打开时，边框按钮显示的位置 
    togglerAlign_closed:"right",//pane关闭时，边框按钮显示的位置 
    togglerContent_open:"<div style='background:red'>AAA</div>",//pane打开时，边框按钮中需要显示的内容可以是符号"<"等。需要加入默认css样式.ui-layout-toggler .content  
    togglerContent_closed:"<img/>",//pane关闭时，同上。 
    enableCursorHotkey:true,//启用快捷键CTRL或shift + 上下左右。 
    customHotkeyModifier:"shift",//自定义快捷键控制键("CTRL", "SHIFT", "CTRL+SHIFT"),不能使用alt 
    south__customHotkey:"shift+0",//自定义快捷键（测试未通过） 
    fxName:"drop",//打开关闭的动画效果 
    fxSpeed:"slow",//动画速度 
    //fxSettings: { duration: 500, easing: "bounceInOut" }//自定义动画设置(未通过测试) 
    //initClosed:true,//初始时，所有pane关闭 
    //initHidden:true //初始时，所有pane隐藏 
    onresize :ons,//调整大小时调用的函数 
    onshow_start:start, 
    onshow_end:end 

</pre>
 </body>